<template>
	<view class="container">
		<view class="kechengbiao" @click="goToCurrentDate">
			课程表
		</view>

		<!-- 选择周次 -->
		<view class="calendar">
			<view class="calendar-item" v-for="(day, index) in weekDays" :key="index" :id="'date-' + day.fullDate"
				:class="{ active: selectedDate === day.fullDate }" @tap="selectDate(day.fullDate)">
				<text class="day-name">{{ day.weekday }}</text>
				<view class="day-circle">
					<text class="day-date">{{ day.date }}</text>
				</view>
				<text class="day-name">{{ day.month }}月</text>
			</view>
		</view>

		<!-- 日程安排 -->
		<view class="schedule">
			<view class="line">
				<view v-for="(item, index) in schedule" :key="index" class="time-point"></view>
			</view>

			<view style="width: 90%;">
				<view v-if="schedule.length === 0" class="no-schedule">
					暂无课程，敬请期待
				</view>

				<view class="schedule-item" v-for="(item, index) in schedule" :key="index">
					<view class="time-line">
						<text class="time">{{ item.time }}</text>
					</view>
					<view style="width: 100%; height: 100%; display: flex; justify-content: right;" class="myclass"
						:class="{ 'animated': animatedIndex === index }" @click="triggerAnimation(index)">
						<view class="content">
							<view style="width: 30%;display: flex;justify-content: center;align-items: center;">
								<image :src="item.icon" mode=""></image>
							</view>
							<view style="width: 70%;display: flex; flex-direction: column; justify-content: center;">
								<view style="font-size: 35rpx;">
									{{ item.title }}
								</view>
								<view style="color: gray;">
									授课年级：{{ item.grade }}
								</view>
								<view style="color: gray;">
									授课任务:{{ item.desc }}
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import {
    globalVariable
} from '../../configMy.js';
export default {
    data() {
        return {
            selectedDate: "",
            weekDays: [],
            schedule: [],
            isAnimating: false,
            isSliding: false,
            animatedIndex: null,
        };
    },
    onLoad() {
        
    },
    methods: {
        // 获取北京时间（UTC+8）
        getBeijingTime() {
            const now = new Date();
            const beijingOffset = 8 * 60 * 60 * 1000; // 北京时间比UTC快8小时
            return new Date(now.getTime() + beijingOffset);
        },
        
        // 格式化日期为北京时间 YYYY-MM-DD
        formatBeijingDate(date) {
            const year = date.getUTCFullYear();
            const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
            const day = date.getUTCDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        
        triggerAnimation(index) {
            this.animatedIndex = index;
            setTimeout(() => {
                this.animatedIndex = null;
            }, 300);
        },
        
        // 跳转到当前日期
        goToCurrentDate() {
            this.$nextTick(() => {
                const targetElement = document.getElementById(`date-${this.selectedDate}`);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
            });
        },

        // 初始化当前周的日期（使用北京时间）
        initWeek() {
            const today = this.getBeijingTime();
            this.selectedDate = this.formatBeijingDate(today);
            
            // 获取本周一的北京时间
            const monday = new Date(today);
            monday.setUTCDate(today.getUTCDate() - (today.getUTCDay() === 0 ? 6 : today.getUTCDay() - 1));

            const weekDays = [];
            for (let i = -30; i < 30; i++) {
                const day = new Date(monday);
                day.setUTCDate(monday.getUTCDate() + i);
                
                const weekdayNames = ["日", "一", "二", "三", "四", "五", "六"];
                const weekday = weekdayNames[day.getUTCDay()];
                
                weekDays.push({
                    weekday: weekday,
                    date: day.getUTCDate(),
                    month: day.getUTCMonth() + 1,
                    fullDate: this.formatBeijingDate(day),
                });
            }

            this.weekDays = weekDays;
        },

        // 获取课程数据（使用北京时间）
        async fetchSchedule(date) {
            try {
                const teacher = uni.getStorageSync('teacher')
                const res = await uni.request({
                    url: globalVariable +
                    `/getAllCourseByTeacherAndDate?date=${date}&teacherId=${teacher.teacherId}`,
                    method: 'GET',
                });
                if (res.data.status == 1) {
                    let data = res.data.data;
                    this.schedule = data.map(course => ({
                        time: this.getCourseTime(course.coursePeriod),
                        title: course.courseName,
                        desc: course.courseTask,
                        grade: course.grade,
                        teacher: course.teacherName,
                        coursePeriod: course.coursePeriod,
                        icon: `/static/system/${this.getCourseIcon(course.courseName)}.png`,
                    })).sort((a, b) => a.coursePeriod - b.coursePeriod);
                } else {
                    this.schedule = [];
                }
            } catch (error) {
                console.error("请求课程表失败", error);
                this.schedule = [];
            }
        },

        // 获取课程时间（使用北京时间）
        getCourseTime(period) {
            const timeSlots = {
                1: "08:00 - 08:45",
                2: "09:05 - 09:50", // 修改为北京时间
                3: "10:15 - 11:00",
                4: "15:00 - 15:45",
                5: "16:05 - 16:50",
                6: "17:15 - 18:00",
            };
            return timeSlots[period] || "未知时间";
        },

        getCourseIcon(courseName) {
            const mapping = {
                "语文": "yuwen",
                "数学": "shuxue",
                "英语": "yingyu",
                "物理": "wuli",
                "化学": "huaxue",
                "生物": "shengwu",
                "地理": "dili",
                "历史": "lishi",
                "政治": "zhengzhi",
            };
            return mapping[courseName] || "default";
        },

        // 选择日期
        selectDate(date) {
            this.selectedDate = date;
            this.fetchSchedule(date);
            this.goToCurrentDate();
        },
    },

    mounted() {
        this.initWeek();
        this.fetchSchedule(this.selectedDate);
        this.goToCurrentDate();
    },
};
</script>


<style scoped>
	page {
		background-color: #f6f8fb;
	}

	.myclass {}

	.myclass:active {}

	@keyframes scaleAnimation {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.animated {
		animation: scaleAnimation 0.3s ease-in-out;
	}

	@keyframes scaleAnimation {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes slideAnimation {
		0% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(10px);
		}

		100% {
			transform: translateX(0);
		}
	}

	.animated {
		animation: scaleAnimation 0.3s ease-in-out;
	}

	.animated-slide {
		animation: slideAnimation 0.3s ease-in-out;
	}

	.no-schedule {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		margin-top: 20rpx;
		font-weight: bold;
	}

	.kechengbiao {
		font-size: 30px;
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.page {
		background-color: #f6f8fb;
	}

	.container {
		background-color: #f6f8fb;
		/* background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); */
		height: 100%;
		padding: 40rpx;
	}

	/* 	page {
		background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
	} */

	.calendar {
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;
		white-space: nowrap;
		overflow: auto;
		border-radius: 20rpx;
		box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
	}

	.calendar-item {
		width: 100rpx;
		height: 180rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
		margin: 0 10rpx;
		cursor: pointer;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.calendar-item.active .day-circle {
		background-color: #4c6ef5;
		color: #ffffff;
	}

	.day-name {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.day-circle {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		color: #333;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.day-circle text {
		font-size: 28rpx;
		font-weight: bold;
	}

	.schedule {
		padding-top: 20rpx;
		display: flex;
	}

	.schedule-item {
		align-items: flex-start;
		padding: 10rpx;
	}

	.time-line {
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 100rpx;
	}

	.content {
		width: 95%;
		height: 200rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;

		/* 	background-color: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(14.5px);
		-webkit-backdrop-filter: blur(14.5px);
		border: 1px solid rgba(255, 255, 255, 0.18);
		box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
		-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
		border-radius: 12px;
		-webkit-border-radius: 12px; */
		/* color: rgba(255, 255, 255, 0.898); */
	}

	.content image {
		width: 100rpx;
		height: 100rpx;
	}

	.blue {
		.task-box {
			display: flex;
			padding: 20rpx;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		}

		background-color: #eaf4ff;
	}

	.white {
		background-color: #ffffff;
	}

	.dark-blue {
		background-color: #3478f6;
		color: #fff;
	}

	.line {
		width: 10%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
	}

	.line::before {
		content: '';
		position: absolute;
		width: 4rpx;
		height: 100%;
		background-color: #4c6ef5;
		left: 50%;
		transform: translateX(-50%);
		z-index: 0;
	}

	.time-point {
		position: relative;
		width: 20rpx;
		height: 20rpx;
		background-color: #4c6ef5;
		border-radius: 50%;
		z-index: 1;
		margin-bottom: 300rpx;
	}

	.time-point.active {
		width: 30rpx;
		height: 30rpx;
		background-color: #3478f6;
	}

	.time {
		font-size: 35rpx;
		color: #666;
		font-weight: 400;
		margin-left: 20rpx;
	}
</style>